<!DOCTYPE html>

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<!-- CSS Tabs is licensed under Creative Commons Attribution 3.0 - http://creativecommons.org/licenses/by/3.0/ -->
<style type="text/css">

body {
font: 100% verdana, arial, sans-serif;
background-color: #fff;
}

/* begin css tabs */

ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 0;
font: bold 11px verdana, arial, sans-serif; /* set font as desired */
border-bottom: 1px solid #6c6; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 0px 10px;
}

ul#tabnav li { /* do not change */
display: inline-block;
}

ul#tabnav li.selected { /* settings for selected tab */
border-bottom: 1px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}


ul#tabnav li { /* settings for all tab links */
padding: 3px 4px;
border: 1px solid #6c6; /* set border COLOR as desired; usually matches border color specified in #tabnav */
border-bottom: 1px solid #cfc;
background-color: #cfc; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
cursor: pointer;
}

ul#tabnav li:hover { /* settings for hover effect */
background: #afa; /* set desired hover color */
}

/* end css tabs */

/* 100% height iframe */
html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
}

nav {
    margin-top: 5px;
}

iframe {
    flex: 1;
    border: none;
}

h1
{
    display: inline;
    float: left;
    font-size: small;
    margin: 0;
    padding: 0 10px;
}

h2
{
    display: inline;
    float: right;
    font-size: small;
    margin: 0;
    padding: 0 10px;
}

</style>
</head>

<body>
<nav>
<h1><a id="hudson_link" href="#"></a></h1>
<h2><a id="zip_link" href="#">Zip</a></h2>

<ul id="tabnav">
